<template>
    <el-dialog :title="form.id? $t('common.editBtn'):$t('common.addBtn')" :close-on-click-modal="false" width="600"
        draggable v-model="visible">
        <el-form :model="form" ref="formRef" label-width="100px" :rules="rules" v-loading="loading">
            <el-form-item :label="$t('aigcPrompt.modelId')" prop="modelId">
                <el-select v-model="form.modelId" :placeholder="$t('aigcPrompt.inputModelIdTip')" clearable>
                    <el-option :key="index" :label="item.name" :value="item.id" v-for="(item, index) in models"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('aigcPrompt.name')" prop="name">
                <el-input v-model="form.name" :placeholder="$t('aigcPrompt.inputNameTip')" clearable ></el-input>
            </el-form-item>
            <el-form-item :label="$t('aigcPrompt.prompt')" prop="prompt">
                <el-input type="textarea" :rows="5" v-model="form.prompt" :placeholder="t('aigcPrompt.inputPromptTip')" clearable />
            </el-form-item>
            <el-form-item :label="$t('aigcPrompt.remark')" prop="remark">
                <el-input type="textarea" :rows="5" v-model="form.remark" :placeholder="t('aigcPrompt.inputRemarkTip')" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible=false">{{$t('common.cancelButtonText')}}</el-button>
            <el-button @click="onSubmit" type="primary" :disabled="loading">{{$t('common.confirmButtonText')}}</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts" name="aigcAppDialog">
import { useI18n } from 'vue-i18n';
import { addObj, getObj, putObj } from '/@/api/aigc/app';
import { getModelList } from '/@/api/aigc/model';
import { useMessage } from '/@/hooks/message';
import { rule } from '/@/utils/validate';
    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);
    const {t} = useI18n();
    // 定义变量内容
    const formRef = ref();
    const visible = ref(false);
    const loading = ref(false);
    // 提交表单数据
    const form = reactive({
        id:'',
        modelId:'',
        name:'',
        prompt:'',
        remark:'',
    });
    //规则校验
    const rules = reactive({
        modelId:[{required:true,message:'模型ID不能为空',trigger:'change'}],
        name:[
            {required:true,message:'名称不能为空',trigger:'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'},
            {validator:rule.validatorNameCn,trigger:'blur'}
        ],
        prompt:[
            {required:true,message:'提示词不能为空',trigger:'blur'}
            ]
    });
    //模型列表
    const models = ref<any>([]);
    //获取模型列表
    const getModels = () => {
        getModelList().then((res:any)=>{
            models.value=res.data;
        });
    };
    //打开对话框
    const openDialog= (id?:string) => {
        visible.value = true;
        form.id='';
        nextTick(()=>{
            formRef.value.resetFields();
        });

        if(id){
           form.id=id;
           getData(id);
        }
        //初始化数据
        getModels();
    };
    //获取数据详情
    const getData = (id:string) => {
        getObj(id).then((res:any)=>{
            Object.assign(form,res.data);
        });
    };

    //提交表单数据
    const onSubmit = async () => {
        const valid = await formRef.value.validate();
        if(!valid){
            return false;
        }
        try{
            loading.value=true;
            form.id?await putObj(form):await addObj(form);
            useMessage().success(form.id?t('common.editSuccessText'):t('common.addSuccessText'));
            visible.value = false;
            emit('refresh');
        }catch (e) {
            useMessage().error(e.msg);
        }finally {
            loading.value=false;
        }
    };
    //对外暴露方法
    defineExpose({
        openDialog,
    });
</script>